<template>
  <div class="Tang box">
    <div class="container box clmcenter" ref="cutBox" v-show="!imgshow">
      <img src="../assets/img/logo.png" class="logo" />
      <div class="tangbox">
        <img :src="url" class="userimg" />
        <img :src="signurl" class="qmimg" />
      </div>
      <!-- <img src="../assets/img/slogan.png" class="slogan" /> -->
      <img src="../assets/img/yz.png" class="yzimg" />
    </div>
    <img :src="finalImg" class="finalimg" v-show="imgshow" />
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { Toast } from "vant";
export default {
  data() {
    return {
      // url: require("../assets/img/test.png"),
      url:'',
      signurl: "",
      finalImg: "",
      imgshow: false,
    };
  },
  mounted() {
    this.url = this.$store.state.imginfo.url;
    this.signurl = this.$store.state.signurl;
    this.$nextTick(() => {
      this.cutPicture(this.$refs.cutBox);
    });
  },
  methods: {
    //截图
    cutPicture(cutbox) {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      const shareContent = cutbox;
      const width = shareContent.offsetWidth;
      const height = shareContent.offsetHeight;
      const canvas = document.createElement("canvas");
      const scale = 2;
      // 宽高扩大 2 倍 处理图片模糊
      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.getContext("2d").scale(scale, scale);
      const options = {
        width: width,
        height: height,
        canvas: canvas,
        useCORS: true,
        logging: true,
        scale: 1,
        dpi: 300,
      };
      html2canvas(shareContent, options).then((canvas) => {
        const context = canvas.getContext("2d");
        context.scale(scale, scale);
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        // 生成图片地址
        const imgUrl = canvas.toDataURL("image/png");
        this.finalImg = imgUrl;
        this.imgshow = true;
        Toast.clear();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Tang {
  .container {
    background: url("../assets/img/bg.jpg") no-repeat center;
    background-size: cover;
    .tangbox {
      align-self: flex-end;
      margin-top: 2rem;
      position: relative;
      width: 624px;
      height: 744px;
      background: url("../assets/img/product.png") no-repeat;
      background-size: 100% 100%;
      text-align: left;
      .userimg {
        margin-top: 5rem;
        margin-left: -21rem;
        width: 1410px;
      }
      .qmimg {
        position: absolute;
        bottom: -2.5rem;
        left: 0;
        width: 170px;
        z-index: 2;
      }
    }
    .slogan {
      margin-top: 2rem;
    }
    .yzimg {
      align-self: flex-end;
      margin-top: 2rem;
      padding-right: 8rem;
    }
  }
  .finalimg {
    width: 100%;
  }
}
@media only screen and (min-height: 1300px) {
  .Tang {
    .container {
      .logo {
        margin-top: 2rem;
      }
      .tangbox {
        margin-top: 4rem;
      }
      .slogan {
        margin-top: 6rem;
      }
      .yzimg {
        margin-top: 3rem;
      }
    }
  }
}
@media only screen and (min-height: 1400px) {
  .Tang {
    .container {
      .logo {
        margin-top: 3rem;
      }
      .tangbox {
        margin-top: 6rem;
      }
      .slogan {
        margin-top: 7rem;
      }
    }
  }
}
</style>
